<template>
  <div class="input-plane">
      <div class="plane">
        <div class="left" :style="{backgroundColor:color}">
          <span class="iconfont" :class="icon"></span>
          <span class="label">{{label}}</span>
        </div>
        <div class="right">
          <slot></slot>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    icon: String,
    label: String,
    color: String
  }
}
</script>

<style scoped lang="stylus">
    .input-plane
      padding 0 5px
      .plane
        display flex
        overflow hidden
        height:45px;
        background:rgba(255,255,255,1);
        box-shadow:0px 3px 7px 0px rgba(89,88,87,0.52);
        border-radius:10px;
        .left
          height 100%
          background-color #009C4E
          width 87px
          display flex
          align-items center
          justify-content center
          flex 0 0 87px
          .iconfont
            color: white;
            dpr-font(18px)
          .label
            color white
            dpr-font(14px)
            margin-left 6px
        .right
          background-color white
          flex 1
          position relative
</style>
